@extends('layout')

@section('title', '首页')


@section('content')

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img class="first-slide" src="http://alicdn.epg.huan.tv/project/shixunsuda/img/1.png" alt="1" id="cover">
        </div>
    </div>
</div>

<div class="container text-center">
    <h3 class="title_blue tit_line">EPG数据服务</h3>
    <p class="lead">提供直播和点播相关的影视节目格式化标签信息及节目场景中的商业化元素</p>
    <a href="#" class="btn btn-primary">了解更多</a>
    <ul class="row b_5">
        <li class="col-xs-12 col-md-4">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/4.png" class=" img_round_list" alt="">
                <span>直播节目数据</span>
            </a>
        </li>
        <li class="col-xs-12 col-md-4">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/5.png" class=" img_round_list" alt="">
                <span>影视媒资数据</span>
            </a>
        </li>
        <li class="col-xs-12 col-md-4">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/6.png" class=" img_round_list" alt="">
                <span>场景商业标签</span>
            </a>
        </li>
    </ul>
</div>

<div class="gray_bg">
    <div class="container text-center">
        <h3 class="title_blue tit_line">智能导视服务</h3>
        <p class="lead">为直播及点播内容运营提供智能导视一体化产品运营服务及用户行为数据统计服务</p>
        <a href="#" class="btn btn-primary">了解更多</a>
        <ul class="row  b_5 pic_list4">
            <li class="col-xs-6 col-md-3">
                <a href="#">
                    <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/7.png" alt="">
                    <span>场景商业标签</span>
                </a>
            </li>
            <li class="col-xs-6 col-md-3">
                <a href="#">
                    <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/8.png" alt="">
                    <span>场景商业标签</span>
                </a>
            </li>
            <li class="col-xs-6 col-md-3">
                <a href="#">
                    <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/9.png" alt="">
                    <span>场景商业标签</span>
                </a>
            </li>
            <li class="col-xs-6 col-md-3">
                <a href="#">
                    <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/10.png" alt="">
                    <span>场景商业标签</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<div class="container text-center">
    <h3 class="title_blue tit_line">广告营销</h3>
    <p class="lead">基于播出节目的场景元素标签，提供向用户投放精准场景式广告的技术及渠道</p>
    <a href="#" class="btn btn-primary">了解更多</a>
    <ul class="row b_5  pic_list4 pic_list4_shadow">
        <li class="col-xs-12 col-md-3">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/11.png" alt="">
                <span>场景商业标签</span>
            </a>
        </li>
        <li class="col-xs-12 col-md-3">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/12.png" alt="">
                <span>场景商业标签</span>
            </a>
        </li>
        <li class="col-xs-12 col-md-3">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/13.png" alt="">
                <span>场景商业标签</span>
            </a>
        </li>
        <li class="col-xs-12 col-md-3">
            <a href="#">
                <img src="http://alicdn.epg.huan.tv/project/shixunsuda/img/14.png" alt="">
                <span>场景商业标签</span>
            </a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    $(function() {
        var scrWidth = window.screen.width;
        var desk_link = 'img/1.png';
        var phone_link = 'img/banner.jpg';
        if (screen.width > 960) {
            $('#cover').attr('src', desk_link);
        } else {
            $('#cover').attr('src', phone_link);
        }
    });
</script>
@endsection

